@import "global";

html,
body,
.side-box,
.main-box {
    height: 100%;
}

.side-box {
    float: left;
    min-width: $nav-min-width;
	background: $color-nav-bg;

	a {
		color: lighten($color-nav-bg, 41%);
		text-decoration: none;
		outline: none !important;

		&:hover {
			color: #fff;
		}
	}
}

.sys-title {
    display: block;
    padding: 12px 0 5px;
    background: lighten($color-nav-bg, 3.2%);
    border-bottom: 1px solid darken($color-nav-bg, 1.2%);
	box-shadow: 0 1px 1px rgba(0, 0, 0, .1);

	> h1 {
		margin-top: 5px;
		font-size: 16px;
		text-align: center;
		color: lighten($color-nav-bg, 61.4%);
	}
}

.logo {
    display: block;
    max-height: $logo-max-height;
    margin: 0 auto;
    border: none;
    outline: none;
}

.nav {
    margin-top: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    white-space: nowrap;
}

.nav-item {
    border-left: 3px solid transparent;
	user-select: none;

	a {
		display: block;
		padding-right: 30px;
	}

	.iconfont {
		float: left;
		margin-right: 14px;
		font-size: 26px;
	}

	&.is-active {
		background: darken($color-nav-bg, 4.2%);
		border-color: $color-highlight;
	}

	&.has-subnav {
		> a:before {
			content: "";
			position: absolute;
			top: 50%;
			right: 12px;
			margin-top: -2px;
			border: 4px solid transparent;
			border-top-color: inherit;
		}
	}
}

.is-active > a {color: #fff;}

.nav-item-link {
    position: relative;
    padding-left: 26px;
    font-size: 15px;
	line-height: 50px;

	&:after {
    	content: "";
		clear: both;
		display: block;
		height: 0;
		overflow: hidden;
	}
}

.subnav {
    display: none;
    margin-left: 60px;
    box-sizing: border-box;
	border-left: 1px solid transparent;

	a {padding-bottom: 6px;}

	> .is-active {
		color: #fff;
		list-style-type: disc;
	}
}

.is-fold {
	&.side-box {
		width: 40px;
		min-width: 0;
	}

	.logo {max-height: 30px;}

	h1,
	.nav-item-link {
		padding-left: 5px;
		font-size: 0;
	}

	.subnav {
		position: absolute;
		left: 40px;
		min-height: 50px;
		padding-top: 5px;
		margin: 0;
		margin-top: -50px;
		background: $color-nav-bg;
		border-color: darken($color-nav-bg, 1.2%);

		> li {list-style-type: none;}

		a {padding: 0 15px 6px;}
	}

	.has-subnav {
		> a:before {display: none;}
	}

	.nav-item.is-active {
		> .subnav {background: darken($color-nav-bg, 4.2%);}
	}
}

.main-box {
	overflow: hidden;

	> iframe {
		width: 100%;
		height: 100%;
		border: none;
		background: #fff;
	}
}
